@charset "UTF-8";

@import '~scss/themes/index.scss';

$component-name: 'tabbar';

$tabber--height: $layout-bottom--height;

$tabber--padding-vertical: 12rpx;

$tabbar--button-background: linear-gradient(to right, $primary-3, $primary-6);

$tabbar--button-background-minor: linear-gradient(to right, $primary-3, $primary-4);

.ui-page-tabbar {
	// position: fixed;
	// bottom: 0;
	// left: 0;
	// z-index: 100;
	width: 100%;
	background-color: $component--background;
	-webkit-user-select: none;
	user-select: none;
	// iphoneX底部的安全距离
	height: calc($tabber--height + constant(safe-area-inset-bottom));
	height: calc($tabber--height + env(safe-area-inset-bottom));
	box-sizing: border-box;
	border-top: 1px solid #e7e7f0;

	&.flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	// 默认的方式
	// 一般适用于 首页等tabbar
	&__item {
		display: block;
		flex: 1;
		padding: $tabber--padding-vertical 0;
		// iphoneX底部的安全距离
		padding-bottom: calc($tabber--padding-vertical + constant(safe-area-inset-bottom));
		padding-bottom: calc($tabber--padding-vertical + env(safe-area-inset-bottom));
		font-size: 0;
		color: $base--text-color;
		text-align: center;
		-webkit-tap-highlight-color: $base--text-color;
	}

	// 第二种 我们用于商品详情页 submit-tabbar
	.tabbar-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		box-sizing: border-box;
		// 商品提交 说明  --- 合计： $1000.00
		.#{$component-name}__text {
			flex: 1;
			text-align: right;
			padding-right: 24rpx;
		}
		// 商品提交按钮 --- 提交订单之内的
		.#{$component-name}__button-submit {
			background: $tabbar--button-background;
			width: 220rpx;
			height: $tabber--height - $tabber--padding-vertical * 2;
			line-height: $tabber--height - $tabber--padding-vertical * 2;
			border: none;
		}

		// 商品导航类的tabbar
		// 其结构一般是左边是 次要操作 如分享、首页、收藏、购物车、客服等
		// 右边是： 加入购物车、立即购买按钮
		&.goods-actions {
			padding: $tabber--padding-vertical $base-page--padding-horizontal;
			.#{$component-name}__actions {
				flex: 1;
				display: flex;
				align-items: center;

				.#{$component-name}__action-icon {
					flex: 1;
					min-width: 48rpx;
					height: 100%;
					color: $font-size-base;
					font-size: $font-size-large;
					line-height: 1;
					text-align: center;
					background-color: #fff;
					box-sizing: border-box;
					cursor: pointer;
				}
			}

			.#{$component-name}__button-submit {
				height: $tabber--height - $tabber--padding-vertical * 2;
				line-height: $tabber--height - $tabber--padding-vertical * 2;
				font-weight: 500;
				font-size: $font-size-base;
				text-align: center;

				border: none;
			}
		}

		// 最普通的
		// 这种一般是 左边是 合计: 100.00
		// 右边是 立即支付
		&.custom {
			.#{$component-name}__text {
				flex: 1;
				color: $base--text-color;
				font-size: $font-size-base;
				text-align: center;
				border: none;
			}
			.#{$component-name}__button-submit {
				flex: 0 0 50%;
				height: $tabber--height;
				line-height: $tabber--height;
				font-weight: 500;
				font-size: $font-size-base;
				text-align: center;
				border-radius: 0;
				background-color: $primary-6;
				background-image: none;
				border: none;
			}
		}
	}

	.tabbar-action-icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 96px;
		height: 100%;
		color: $base--text-color;
		font-size: 32px;
		line-height: 1;
		text-align: center;
		background-color: #fff;
		cursor: pointer;
		&__icon {
			width: 1em;
			margin: 0 auto 8rpx;
			color: #323233;
			font-size: 32rpx;
			&.is-img > img {
				width: 40rpx;
				height: 40rpx;
			}
		}

		&__text {
			font-size: $font-size-caption-sm;
			color: $color-text-caption;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
		}
	}

	// 商品提交按钮 --- 提交订单之内的
	.tabbar__button-submit {
		background: $tabbar--button-background;
		width: 380px;
		height: $tabber--height - $tabber--padding-vertical * 2;
		line-height: $tabber--height - $tabber--padding-vertical * 2;
		border-radius: $tabber--height - $tabber--padding-vertical * 2;
		font-size: $font-size-base;
		font-weight: 500;
		color: #fff;
		border: none;
		cursor: pointer;
	}

	// 商品的按钮组  一般为两个 多个就需要自己去修改样式
	.tabbar__button-submit-group {
		flex: 1;
		width: 0;
		display: flex;
		align-items: center;
		min-width: 420px;
		.tabbar__button-submit {
			border-radius: 0;
			height: 100%;
			flex: 0 0 50%;
		}

		.tabbar__button-submit:first-child {
			border-top-left-radius: $tabber--height - $tabber--padding-vertical * 2;
			border-bottom-left-radius: $tabber--height - $tabber--padding-vertical * 2;
			background-image: $tabbar--button-background-minor;
		}
		.tabbar__button-submit:last-child {
			border-top-right-radius: $tabber--height - $tabber--padding-vertical * 2;
			border-bottom-right-radius: $tabber--height - $tabber--padding-vertical * 2;
		}
	}
}
